<template>
  <div class="big-index-swiper-next ">
    <div class="swiper-next">
      <div class="swiper-next-left">
        <img
          src="@/assets/v3/new-announcement.png"
          alt=""
          srcset=""
          class="swiper-next-left-img"
        />
      </div>
      <div class="swiper-next-right"></div>
      <div class="swiper-next-right2" style="z-index:9">
        <div class="swiper-container-newn">
          <div class="swiper-wrapper">
            <div
              class="swiper-slide line1"
              v-for="(item, index) in WatchList"
              :key="item.id"
              @click.stop="particulars(item)"
            >
              {{ item.title }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Swiper from "swiper";
// import "swiper/css/swiper.css";
export default {
  data() {
    return {
      item: {},
      WatchList: []
    };
  },
  mounted() {
    //获取今日看点

    this.$getHttp("/mob/home/getWatch", {
      pageSize: 10,
      pageNo: 1,
      auditStatus: 2
    }).then(data => {
      console.log(data);
      if (data.code == 200) {
        this.WatchList = data.list;

        setTimeout(() => {
          // https://blog.csdn.net/qq_41046662/article/details/88035800
          this.mySwiper = new Swiper(".swiper-container-newn", {
            direction: "vertical", // 水平切换选项    垂直vertical  默认是水平切换模式
            loop: true, // 循环模式选项

            autoplay: {
              // 自动滑动

              stopOnLastSlide: true,
              speed: 2000,
              delay: 2000, //5秒切换一次
              disableOnInteraction: false
            },
            // slidesOffsetBefore: 140,
            grabCursor: true,
            // pagination: {
            //   el: ".swiper-pagination2", //分页器 -
            // },
            // slidesPerView: "auto", //设置slider容器能够同时显示的slides数量
            noSwiping: false, //设为true时，可以在slide上（或其他元素）增加类名'swiper-no-swiping'，使该slide无法拖动，希望文字被选中时可以考虑使用。该类名可通过noSwipingClass修改
            watchSlidesProgress: true, //开启这个参数来计算每个slide的progress(进度、进程)
            paginationClickable: false,
            // slidesPerView: "auto", //设置slider容器能够同时显示的slides数量
            // spaceBetween: 0, //在slide之间设置距离 默认单位px 也可以设置% vw vh ....
            centeredSlides: true //设定为true时，active slide会居中，而不是默认状态下的居左
            // slidesOffsetBefore: 60, //设定slide与左边框的预设偏移量 还有slidesOffsetAfter 反之
          });
        }, 200);
      }
    });
  },
  methods: {
    particulars(item) {
      localStorage.setItem("banner", JSON.stringify(item));
      const routeLink = this.$router.resolve({
        path: "/index/particulars?type=watch&id=" + item.id
      });
      window.open(routeLink.href, "_blank");
    }
  }
};
</script>

<style lang="less" scoped>
.big-index-swiper-next {
  .swiper-next {
    width: 100%;
    display: flex;

    align-items: center;
    position: relative;
    .swiper-next-left {
      width: 123px;
      height: 37px;
      .swiper-next-left-img {
        width: 123px;
        height: 100%;
      }
    }
    .swiper-next-right {
      position: absolute;
      z-index: -1;
      right: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 1110px;
      height: 33px;
      line-height: 33px;
      background: #f2f2f2;
      border-radius: 17px 17px 17px 17px;
      opacity: 1;
    }
    .swiper-next-right2 {
      position: absolute;
      z-index: -1;
      right: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 1110px;
      height: 33px;
      line-height: 33px;

      border-radius: 17px 17px 17px 17px;
      opacity: 1;

      .swiper-container-newn {
        // width: 100%;
        width: 1200px;

        height: 100%;
        overflow: hidden;
        .swiper-wrapper {
          display: flex;
          padding-left: 50px;
          flex-direction: column;
          .swiper-slide {
            // padding-left: 50px;
            flex-shrink: 0;
            font-size: 18px;
            font-weight: 400;
            color: #333333;
            .swiper-slide-content {
              user-select: none;
            }
          }
        }
      }
    }
  }
}
</style>
